<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.7.0/themes/metro-blue/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.7.0/themes/icon.css">
    <script type="text/javascript" src="/static/jquery-easyui-1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">

        var url;

        //获取搜索框数据,刷新数据表格实现搜索
        function searchUser() {
            $("#dg").datagrid('load', {
                "userName": $("#s_userName").val()
            });
        }

        //置空搜索条件
        function resetValue() {
            $("#s_userName").val("");
        }

        //置空添加或修改框的值
        function resetValue2() {
            $("#id").val("");
            $("#userName").val("");
            $("#password").passwordbox('setValue', '');
            $("#password2").passwordbox('setValue', '');
            $("#nickName").val("");
            $("#email").val("");
        }

        //关闭添加或修改框
        function closeUserDialog() {
            $("#dlg").dialog("close");
            resetValue2();
        }

        //添加或修改用户
        function saveUser() {
            let password = $("#password").passwordbox('getValue');
            let password2 = $("#password2").passwordbox('getValue');
            if (password !== password2) {
                $.messager.alert("系统提示", "密码和确认密码不一致，请重新输入！！");
                return false;
            }
            $("#fm").form("submit", {
                url: url,
                onSubmit: function () {
                    return $(this).form("validate");
                },
                success: function (result) {
                    var result = eval('(' + result + ')');
                    if (result.success) {
                        $.messager.alert("系统提示", "保存成功！");
                        resetValue2();
                        $("#dlg").dialog("close");
                        $("#dg").datagrid("reload");
                    } else {
                        $.messager.alert("系统提示", "保存失败!");
                    }
                }
            });
        }

        function openUserAddDialog() {
            $("#dlg").dialog("open").dialog("setTitle", "添加用户信息");
            url = "/admin/user/save";
        }

        function openUserModifyDialog() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length != 1) {
                $.messager.alert("系统提示", "请选择一条要修改的数据！");
                return;
            }
            var row = selectedRows[0];
            $("#dlg").dialog("open").dialog("setTitle", "修改用户信息");
            $("#fm").form("load", row);
            $("#password2").passwordbox('setValue', row.password);
            url = "/admin/user/save?id=" + row.id;
        }

        function deleteUser() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length == 0) {
                $.messager.alert("系统提示", "请选择要删除的数据！");
                return;
            }
            var strIds = [];
            for (var i = 0; i < selectedRows.length; i++) {
                strIds.push(selectedRows[i].id);
            }
            var ids = strIds.join(",");
            $.messager.confirm("系统提示", "您确定要删除这<span style='color: red'>" + selectedRows.length + "</span>条数据吗?", function (r) {
                if (r) {
                    $.post("/admin/user/delete", {ids: ids}, function (result) {
                        if (result.success) {
                            $.messager.alert("系统提示", "数据已成功删除！");
                            $("#dg").datagrid("reload");
                        } else {
                            $.messager.alert("系统提示", result.errorInfo);
                        }
                    }, "json");
                }
            });
        }

        function banUser() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length != 1) {
                $.messager.alert("系统提示", "请选择一个用户！");
                return;
            }
            var id = selectedRows[0].id;
            var status = selectedRows[0].status;
            if (status == 1) {
                $.messager.confirm("系统提示", "您确定要<span style='color: red'>封禁</span>这个用户吗?", function (r) {
                    if (r) {
                        $.post("/admin/user/banUser", {id: id, status: 2}, function (result) {
                            if (result.success) {
                                $.messager.alert("系统提示", "封禁成功！");
                                $("#dg").datagrid("reload");
                            } else {
                                $.messager.alert("系统提示", result.errorInfo);
                            }
                        }, "json");
                    }
                });
            } else {
                $.messager.confirm("系统提示", "您确定要<span style='color: forestgreen'>解禁</span>这个用户吗?", function (r) {
                    if (r) {
                        $.post("/admin/user/banUser", {id: id, status: 1}, function (result) {
                            if (result.success) {
                                $.messager.alert("系统提示", "解禁成功！");
                                $("#dg").datagrid("reload");
                            } else {
                                $.messager.alert("系统提示", result.errorInfo);
                            }
                        }, "json");
                    }
                });
            }
        }

        $(document).ready(function () {

            $("#dg").datagrid({
                onDblClickRow: function (index, row) {
                    $("#dlg").dialog("open").dialog("setTitle", "修改用户信息");
                    $("#fm").form("load", row);
                    $("#password2").passwordbox('setValue', row.password);
                    url = "/admin/user/save?id=" + row.id;
                }
            });

        });

        function formatStatus(val, row) {
            if (val == 1) {
                return "<span style='color: blue'>正常</span>";
            } else {
                return "<span style='color: red'>封禁</span>";
            }
        }
    </script>
</head>
<body style="margin-left: 1px">
<!--数据表格-->
<table id="dg" title="用户管理" class="easyui-datagrid" striped="true" fitColumns="true" pagination="true" rownumbers="true"
       url="/admin/user/list" fit="true" toolbar="#tb">
    <thead>
    <th field="cb" checkbox="true" align="center"></th>
    <th field="id" width="20" align="center" hidden="hidden">编号</th>
    <th field="userName" width="50" align="center">用户名</th>
    <th field="nickName" width="50" align="center">昵称</th>
    <th field="email" width="50" align="center">邮箱</th>
    <th field="status" width="50" align="center" formatter="formatStatus">账号状态</th>
    </thead>
</table>
<!--工具栏-->
<div id="tb">
    <div>
        <a href="javascript:openUserAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="javascript:openUserModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit"
           plain="true">修改</a>
        <a href="javascript:deleteUser()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        <a href="javascript:banUser()" class="easyui-linkbutton" iconCls="icon-banUser" plain="true">封禁与否</a>
    </div>
    <div>
        &nbsp;用户名：&nbsp;<input type="text" id="s_userName" size="20" onkeydown="if(event.keyCode==13) searchUser()"/>
        <a href="javascript:searchUser()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
        <a href="javascript:resetValue()" class="easyui-linkbutton" iconCls="icon-reset" plain="true">重置</a>
    </div>
</div>
<!--添加或修改框-->
<div id="dlg" class="easyui-dialog" style="width: 366px;height: 322px;padding: 10px 20px"
     closed="true" buttons="#dlg-buttons" data-options="onClose:function(){resetValue()}">
    <form id="fm" method="post">
        <table cellspacing="8px">
            <tr>
                <td valign="top">昵称:</td>
                <td>
                    <input id="nickName" name="nickName" class="easyui-validatebox" required="true"
                           style="width: 200px;height: 30px">
                </td>
            </tr>
            <tr>
                <td valign="top">用户名:</td>
                <td>
                    <input id="userName" name="userName" class="easyui-validatebox" required="true"
                           style="width: 200px;height: 30px">
                </td>
            </tr>
            <tr>
                <td valign="top">密码:</td>
                <td>
                    <input id="password" name="password" class="easyui-passwordbox" required="true"
                           style="width: 200px;height: 30px">
                </td>
            </tr>
            <tr>
                <td valign="top">确认密码:</td>
                <td>
                    <input id="password2" class="easyui-passwordbox" required="true" style="width: 200px;height: 30px">
                </td>
            </tr>
            <tr>
                <td valign="top">邮箱:</td>
                <td>
                    <input id="email" name="email" class="easyui-validatebox" required="true"
                           style="width: 200px;height: 30px">
                </td>
            </tr>
        </table>
    </form>
</div>
<!--添加或修改框的工具栏-->
<div id="dlg-buttons">
    <a href="javascript:saveUser()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
    <a href="javascript:closeUserDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>
</body>
</html>